import React, { Component } from 'react'
import Child from '../Child'
import './index.css'

class Parent extends Component {
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  }
  // !#1. 父组件循环数据生成 <Child/> 组件并传递数组到 <Child/> 组件
  render() {
    const { list } = this.state
    return (
      <div className='parent'>
        {/* {list.map((item) => (
          <Child
            key={item.id}
            name={item.name}
            price={item.price}
            info={item.info}
          />
        ))} */}
        {/* 和上面等价 */}
        {list.map((item) => (
          <Child key={item.id} {...item} />
        ))}
      </div>
    )
  }
}

export default Parent
